<template>
  <h1>hello vue3</h1>
  <!-- 
    vue2中v-model给组件绑定
      value属性和input事件

    vue3中
      v-model="xxx"
        绑定的属性 modelValue
        绑定的事件 update:modelValue

      v-model:xxx="xxx"
        绑定的属性 xxx
        绑定的事件 update:xxx

      vue3 移除了v-bind.sync
   -->
  <Child v-model="count" />

  <Son v-model:count="count" v-model:num="num" />
</template>

<script lang="ts">
import { defineComponent } from "vue";

import Child from "./Child.vue";
import Son from "./Son.vue";

export default defineComponent({
  name: "App",
  components: {
    Child,
    Son,
  },
  data() {
    return {
      count: 0,
      num: 10,
    };
  },
});
</script>

<style scoped></style>
